<template>
  <div id="index">
    <section class="pageOne">
      <span class="mask"></span>
      <div class="index-welcome">
        <img
          class="img-fluid animated"
          data-animation-delay="1000"
          data-animation-in="jackInTheBox"
          src="https://boomerang.bootmb.com/assets/images/brand/icon.png"
          style="width: 200px"
        />
        <h2>欢迎进入LLJ's blog</h2>
        <TypeWriter
          :typeList="saying"
          class="type-writer"
          size="18px"
        ></TypeWriter>
      </div>
      <div class="arrow">
        <el-icon>
          <ArrowDown />
        </el-icon>
      </div>
      <wave height="100px"></wave>
    </section>
    <section class="pageTwo">
      <div class="container">
        <div class="blog">
          <el-skeleton
            :count="4"
            :loading="BlogList.length === 0"
            animated
            class="skeleton"
          >
            <template #template>
              <div class="skeleton-item">
                <el-skeleton-item style="height: 180px" variant="image" />
                <div class="skeleton-item-content">
                  <el-skeleton-item style="width: 50%" variant="h3" />
                  <el-skeleton-item style="width: 70%" variant="text" />
                  <el-skeleton-item
                    v-for="(item, index) in 4"
                    :key="index"
                    style="width: 100%"
                    variant="text"
                  />
                </div>
              </div>
            </template>
            <template #default>
              <div
                v-for="(item, index) in BlogList"
                :key="index"
                @click="changeRouter(item)"
              >
                <div
                  :style="{
                    'flex-direction': index % 2 === 0 ? 'row' : 'row-reverse',
                  }"
                  class="blog-item"
                >
                  <div class="item-left">
                    <el-image :src="item.cover" class="img" />
                  </div>
                  <div class="item-right">
                    <span v-if="item.isTop" class="hot">
                      <i class="iconfont icon-zhiding"></i
                    ></span>
                    <div class="title">{{ item.title }}</div>
                    <div class="desc">
                      <!-- 分类名 -->
                      <p>
                        <span>
                          <i class="iconfont icon-fenlei-copy"></i
                          >{{ item.sort_name }}</span
                        >
                      </p>
                      <!-- 日期 -->
                      <p style="color: #a8abb2">
                        <span>
                          <i class="iconfont icon-rili"></i>
                          {{ dayjs(item.pub_date).format("YYYY-MM-DD") }}
                        </span>
                        |
                        <span>
                          <i class="iconfont icon-shijian"></i>
                          {{ dayjs(item.up_date).format("YYYY-MM-DD") }}
                        </span>
                      </p>
                      <!-- 点赞评论浏览 -->
                      <p style="color: #a8abb2">
                        <span>
                          <i class="iconfont icon-icon1"></i>
                          {{ item.likes }}
                        </span>
                        <span>
                          <i class="iconfont icon-pinglun"></i>
                          {{ item.total }}
                        </span>
                        <span>
                          <i class="iconfont icon-icon"></i>
                          {{ item.look }}
                        </span>
                      </p>
                      <!-- 博客概述 -->
                      <p style="color: #909399">{{ item.summary }}</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="pagination">
                <el-pagination
                  v-model:current-page="current"
                  v-model:page-size="pageSize"
                  :background="true"
                  :total="total"
                  layout="prev, pager, next, jumper"
                  @current-change="handleCurrentChange"
                />
              </div>
            </template>
          </el-skeleton>
        </div>
        <div class="author">
          <UserCard></UserCard>
          <Timer></Timer>
          <Calendar></Calendar>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { getAllBlog } from "@/api/index.js";
import dayjs from "dayjs";
import UserCard from "../../components/UserCard/index.vue";
import Timer from "../../components/Timer/index.vue";
import Calendar from "../../components/Calendar/index.vue";
import router from "../../router/index.js";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import TypeWriter from "@/components/TypeWriter/type-writer.vue";
import { ArrowDown } from "@element-plus/icons-vue";
import wave from "@/components/wave/index.vue";

const { proxy } = getCurrentInstance();
let BlogList = ref([]);
let current = ref(1);
let total = ref(0);
let pageSize = ref(0);
const saying = ref([]);
gsap.registerPlugin(ScrollTrigger);
// 获取所有博客
const getBlog = async (params = {}) => {
  let res = await getAllBlog(params);
  if (res && res.status === 200) {
    BlogList.value = res.data;
    current.value = Number(res.page);
    pageSize.value = Number(res.pageSize);
    total.value = Number(res.total);
  }
};
// 切换分页
const handleCurrentChange = (val) => {
  getBlog({ page: val });
};

const initOneSentence = async () => {
  // fetch("https://api.vvhan.com/api/ian/rand?type=json")
  //     .then((res) => res.json())
  //     .then((res) => {
  //       if (res.success) {
  //         saying.value = [res.data.content];
  //       }
  //     });
  saying.value = ["种一颗树最好的时间是十年前，其次是现在"];
};
// 跳转到博客详情
const changeRouter = (item) => {
  router.push("/preview/" + item.id);
};
onMounted(() => {
  getBlog();
  initOneSentence();
  gsap.to(".pageOne", {
    scrollTrigger: {
      trigger: "#index",
      scrub: true,
      start: "top top",
      end: "bottom",
      ease: "power1.inOut",
    },
    scale: 1.2,
  });
});
</script>

<style lang="scss" scoped>
#index {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pageOne {
  width: 100%;
  height: 100vh;
  background-image: url("https://ik.imagekit.io/mpjl8xreo/indexbg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;

  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    opacity: 0.7;
    background-color: rgba(0, 0, 0, 0.6) !important;
  }

  .index-welcome {
    position: absolute;
    width: 700px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;

    h2 {
      font-family: "Nunito", sans-serif;
      color: #fff;
      font-weight: 700;
      font-size: 40px;
      margin: 30px 0px;
    }

    P {
      font-family: "Nunito", sans-serif;
      color: #fff;
      font-weight: 500;
      font-size: 20px;
    }
  }

  .arrow {
    position: absolute;
    left: 50%;
    bottom: 80px;
    transform: translateX(-50%);
    font-size: 30px;
    color: #fff;
    animation: bounce-8ef51bb3 2s infinite;
  }
}

.pageTwo {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 20px;

  .container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 6fr 2fr;
    gap: 15px;

    .blog {
      position: relative;
      display: flex;
      flex-direction: column;

      gap: 15px;
      padding: 20px 20px 50px;
      min-height: 100vh;
      cursor: pointer;
      // 共享样式
      .blog-item {
        position: relative;
        width: 100% !important;
        height: 250px;
        display: flex;
        gap: 15px;
        background-color: #fff;
        border-radius: 10px;
        color: #333;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

        .item-left {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
        }

        .item-right {
          @extend .item-left;
          padding: 0 20px;
        }

        .hot {
          position: absolute;
          top: -12px;
          left: 0;
          color: orange;

          i {
            font-size: 50px;
          }
        }

        .img {
          width: 100%;
          height: 250px;
        }

        .title {
          font-weight: 600;
          font-size: 26px;
          color: #4b4948;
        }

        .summary {
          color: #a8abb2;
        }

        .desc {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          gap: 15px;
          font-size: 15px;
          padding: 10px;

          span {
            margin-right: 5px;

            i {
              margin: 0 5px;
            }
          }
        }
      }

      // 分页
      .pagination {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 15px;
      }

      //骨架屏
      .skeleton {
        display: flex;
        flex-direction: column;
        gap: 30px;

        .skeleton-item {
          width: 100%;
          display: grid;
          grid-template-columns: 240px 1fr;
          gap: 15px;

          .skeleton-item-content {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 15px;
          }
        }
      }
    }

    .author {
      //解决滚动向下的时候 mask挡住user卡片
      z-index: 999;
    }
  }
}

@media screen and (max-width: 960px) {
  .index-welcome h2 {
    margin: 20px 0 !important;
  }
  .pageTwo .container {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr !important;

    .blog .blog-item {
      width: 100%;
      height: auto !important;
      display: flex;
      flex-direction: column !important;
      align-items: center;
    }

    .skeleton .skeleton-item {
      width: 100%;
      display: flex !important;
      flex-direction: column !important;
    }

    .author {
      display: none;
    }
  }
}
</style>
